<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
		<script>
			$(function(){
				var $hobby = $("input[name=hobby]")
				var $checkReverse = $("#checkReverse")
				
				$("first").click(function(){
					
				})
				
				$("#checkAll").click(function(){
					$hobby.prop("checked", true)
					$("#first").prop("checked", true)
				})
				
				$("#checkNone").click(function(){
					$hobby.prop("checked", false)
					$("#first").prop("checked", false)
				})
				
				$("#checkReverse").click(function(){
					$hobby.each(function(){
						this.checked = !this.checked
					})
					alert($hobby.filter(":not(:checked)").length)
					$("#first").prop("checked", $hobby.filter(":not(:checked)").length === 0)
				})
				
				$("#first").click(function(){
					$hobby.prop("checked", this.checked)
				})
				
				$hobby.click(function(){
					$("#first").prop("checked", $hobby.filter(":not(:checked)").length === 0)
				})
			})
			
			
		</script>
	</head>
	<body>
		<form action="http://www.baidu.com" method="get">
			你的爱好是:			
			<input type="checkbox" id="first"/>全选/全部选<br />
			
			<input type="checkbox" name="hobby" value="swimming"/>游泳
			<input type="checkbox" name="hobby" value="fishming"/>钓鱼
			<input type="checkbox" name="hobby" value="watching"/>看电影
			<input type="checkbox" name="hobby" value="climbing"/>爬山<br />
			
			<input type="button" id="checkAll" value="全选"/>
			<input type="button" id="checkNone" value="全不选"/>
			<input type="button" id="checkReverse" value="反选"/>
			<input type="submit" value="提交" name="submit" id=""/>
		</form>
	</body>
</html>
